// import { Component, OnInit, OnChanges } from '@angular/core';
import { Component } from '@angular/core';

@Component({
  selector: 'app-life-cycle',
  templateUrl: './life-cycle.component.html',
  styleUrls: ['./life-cycle.component.css']
})
/*
// export class LifeCycleComponent implements OnInit {
export class LifeCycleComponent implements OnInit, OnChanges {     // 这是一种写法，去实现生命周期的接口，下面就必须实现接口里的方法

  constructor() { }

  ngOnInit() {
  }
  ngOnChanges() {

  }

}
*/

// 还有一种写法，不去实现生命周期的接口，也可以使用生命周期函数钩子
export class LifeCycleComponent {   

  private msg:string = '生命周期钩子演示'

  constructor() { 
    console.log('00构造函数执行了  -- 除了使用简单的值对局部变量进行初始化之外，什么都不应该做');
    
  }

  changeMsg() {
    this.msg = '值改变后的生命周期钩子03 05 07'
  }

  ngOnChanges() {
    console.log('01ngOnChanges执行了 -- 当被绑定的输入属性的值发生变化时调用（父子组件传值的时候会触发）');
    // 只有父子传参的值变更的时候才会执行
  }

  ngOnInit() {
    console.log('02ngOnInit执行了 -- 请求数据一般放在这个里面');
    // 执行一次
  }

  ngDoCheck() {
    console.log('03ngDoCheck执行了 -- 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
    // 写一些自定义操作
    // 数据变化和不变化的结果操作
  }

  ngAfterContentInit() {
    console.log('04ngAfterContentInit执行了 -- 当把内容投影进组件之后调用');
    // 执行一次
  }

  ngAfterContentChecked() {
    console.log('05ngAfterContentChecked执行了 -- 每次完成被投影组件内容的变更检测之后调用');
    //数据变化时触发
  }

  ngAfterViewInit() {
    console.log('06ngAfterViewInit执行了 -- 初始化完组件视图及其子视图之后调用(dom操作仿真这里)');
    // 执行一次
  }

  ngAfterViewChecked() {
    console.log('07ngAfterViewChecked执行了 -- 每次做完组件视图和子视图的变更检测之后调用');
    // 视图变化时触发
  }

  ngOnDestory() {
    console.log('08ngOnDestory执行了 -- 组件销毁时调用');
    
  }
  

}
